<template>
  <x-sub-page class="rectify-inform-add" :content="title" @goBack="handleBack">
    <!-- 基本信息 -->
    <el-form :model="params" :rules="rules" ref="params" class="form-inline" label-position="top">
      <el-row :gutter="20">
        <x-col>
          <el-form-item label="供应商名称" prop="supplierName">
            <supplier-select
              v-model="params.supplierName"
              :placeholder="$t('supplier.rectifyInform.supplierNamePlaceholder')"
              @on-change="handleChangeSupplier"
            >
            </supplier-select>
          </el-form-item>
        </x-col>
        <x-col>
          <el-form-item label="整改来源" prop="supplierName2">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </x-col>
        <x-col>
          <el-form-item label="来源单号" prop="supplierName3">
            <el-input
              v-model="params.supplierName"
              :placeholder="$t('supplier.rectifyInform.supplierNamePlaceholder')"
              @on-change="handleChangeSupplier"
            >
            </el-input>
          </el-form-item>
        </x-col>
        <x-col>
          <el-form-item :label="'供应商需回复日期'" prop="replyDate">
            <el-date-picker
              v-model="params.replyDate"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('supplier.fieldAssessment.placeholderSelect')"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </x-col>
        <x-col :span="24">
          <el-form-item :label="'主要问题描述'" prop="description">
            <el-input
              type="textarea"
              v-model="params.description"
              placeholder="请输入主要问题描述"
              style="width: 100%"
              maxlength="2000"
              :rows="4"
              show-word-limit
            ></el-input>
          </el-form-item>
        </x-col>
        <x-col :span="24">
          <el-form-item :label="'改进要求'" prop="requires">
            <el-input
              type="textarea"
              v-model="params.requires"
              placeholder="请输入改进要求"
              style="width: 100%"
              maxlength="2000"
              :rows="4"
              show-word-limit
            ></el-input>
          </el-form-item>
        </x-col>
        <x-col :span="24">
          <el-form-item :label="'附件'" prop="file">
            <x-upload
              ref="fileUpload"
              :fileSize="30"
              :span="6"
              :isFileRemark="false"
              :edit-flag="true"
              :limit="9"
              :old-file-list="params.rectifyFileVoList"
              :file-type="['jpg', 'jpeg', 'png', 'ppt', 'pptx', 'pdf', 'xls', 'xlsx', 'doc', 'docx']"
              :tips="'支持上传PPT/PDF/EXCEL/WORD/PNG/JPG形式文件, 最多9个, 附件大小不超过30MB.'"
            >
            </x-upload>
          </el-form-item>
        </x-col>
      </el-row>
    </el-form>
    <div class="footer">
      <el-button @click="handleCancel">
        {{ $t('common.goBack') }}
      </el-button>
      <el-button type="primary" @click="handleSubmit(1)" :loading="loading" v-hasPermi="['srm:rectify:add']">
        {{ $t('common.save') }}
      </el-button>
      <!-- <el-button type="primary" @click="handleSend(0)" :loading="loading" v-hasPermi="['srm:rectify:batchSend']">
        {{ $t('common.send') }}
      </el-button> -->
    </div>
    <supplier-select-dialog ref="supplierSelect" :multiple="false"></supplier-select-dialog>
  </x-sub-page>
</template>
<script>
  import { formatSubmitFiles, QueryDictMixin, throttle } from '@package/utils'
  import SupplierSelect from '@/components/supplier-select/index.vue'
  import { EnumApiCode } from '../../../../../../globalEnum.js'
  import SupplierSelectDialog from '../components/supplierSelectDialog.vue'
  import {
    apiAddRectifyInform,
    apiGetRectifyInformDetail,
    apiUpdateRectifyInform
  } from '@/modules/supplier/api/rectifyInform.js'

  export default {
    name: 'RectifyInformAdd',
    components: { SupplierSelectDialog, SupplierSelect },
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        options: [
          {
            value: '1',
            label: '项目1'
          },
          {
            value: '2',
            label: '项目2'
          }
        ],
        value: '',
        rectifyId: '',
        params: {
          supplierName: '',
          source: '',
          sourceNumber: '',
          replyDate: '',
          description: '',
          requires: '',
          rectifyFileDtoList: []
        },
        rules: {
          supplierName: [{ required: true, message: '请输入供应商名称', trigger: ['blur', 'change'] }],
          // source: [
          //   { required: true, message: this.$t('supplier.rectifyInform.rectifySourcePlaceholder'), trigger: 'change' }
          // ],
          replyDate: [{ required: true, message: '请选择供应商需回复日期', trigger: 'blur' }],
          description: [{ required: true, message: '请输入主要问题描述', trigger: 'blur' }],
          requires: [{ required: true, message: '请输入改进要求', trigger: 'blur' }]
        },
        loading: false,
        srmDictKeys: ['srm_rectify.source'],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 86_400_000
          }
        }
      }
    },
    computed: {
      title() {
        return `${this.rectifyId ? '编辑' : '新建'}整改通知`
      }
    },
    created() {
      this.rectifyId = this.$route.query.rectifyId
      this.initDictConfig()
      this.rectifyId && this.init()
    },
    methods: {
      async init() {
        const { data, code } = await apiGetRectifyInformDetail(this.rectifyId)
        if (code === EnumApiCode.Success) {
          this.params = { ...data }
        }
      },
      handleChangeSupplier(row) {
        this.params = {
          ...this.params,
          supplierName: row.fullName,
          supplierId: row.id,
          supplierCode: row.supplierCode
        }
      },
      handleBack() {
        this.handleCancel()
      },
      handleCancel() {
        this.$router.go(-1)
        this.closePages()
      },
      getParams(action) {
        return {
          ...this.params,
          replyDate: `${this.params.replyDate} 23:59:59`,
          rectifyFileDtoList: formatSubmitFiles(this.$refs.fileUpload.fileList),
          action
        }
      },
      handleSubmit: throttle(function (action) {
        this.$refs.params.validate(async (valid) => {
          if (valid) {
            const param = this.getParams(action)
            try {
              this.loading = true
              const { code } = this.params.id ? await apiUpdateRectifyInform(param) : await apiAddRectifyInform(param)
              if (code === EnumApiCode.Success) {
                this.$message.success(param.id ? this.$t('common.editSuccess') : this.$t('common.newSuccess'))
                this.handleCancel()
              }
            } finally {
              this.loading = false
            }
          } else {
            return false
          }
        })
      }, 1000),
      handleSend: throttle(function (action) {
        this.$refs.params.validate(async (valid) => {
          if (valid) {
            const confirm = await this.$confirm('是否确认发送整改通知?', '提示')
            if (!confirm) {
              return false
            }
            const param = this.getParams(action)
            try {
              this.loading = true
              const { code } = await apiAddRectifyInform(param)
              if (code === EnumApiCode.Success) {
                this.$message.success('发送成功')
                this.handleCancel()
              }
            } finally {
              this.loading = false
            }
          } else {
            return false
          }
        })
      }, 1000)
    }
  }
</script>
<style lang="scss" scoped>
  .rectify-inform-add {
    overflow: hidden;
    .form-inline {
      width: 100%;
      height: 100%;
      padding: 20px;
      overflow-y: auto;
      box-sizing: border-box;
    }
  }
  .footer {
    width: 100%;
    padding: 16px 0;
    display: flex;
    justify-content: center;
    box-shadow: 0 -2px 4px rgb(0 0 0 / 5%);
    z-index: 1;
    position: relative;
  }
</style>
